<template>
	<view class="login-body">
		<image src="https://jyduowei.oss-cn-qingdao.aliyuncs.com/login-logo.png" mode="widthFix" class="login-logo"></image>
		<!-- 登录表单 -->
		<view>
			<view class="login-form">
				<view class="form-item">
					<view class="form-label">
						<img src="../../static/image/login/account.png"  class="form-icon">
					</view>
					<view class="form-content">
						<input type="number" pattern="\d*" @blur="rules" placeholder="请输入手机号"  v-model="form.mobile" class="form-input"/>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						<img src="../../static/image/login/code.png"  class="form-icon">
					</view>
					<view class="form-content">
						<input placeholder="请输入验证码" type="number" pattern="\d*" v-model = "form.code" class="form-input"/>
						<view class="get-code" @tap="getCode()">
							<text v-if="s == 0">获取验证码</text>
							<text v-else class="code-time">{{s}}秒后获取</text>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						<img src="../../static/image/login/password.png"  class="form-icon">
					</view>
					<view class="form-content">
						<input :type="pwd_see ? 'text' : 'password'" placeholder="请输入新密码" v-model="form.password" class="form-input"/>
						<view class="get-code" @tap="see(1)">
							<i class="icon" v-if="!pwd_see">&#xe614;</i>
							<i class="icon" v-else>&#xe617;</i>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						<img src="../../static/image/login/password.png"  class="form-icon">
					</view>
					<view class="form-content">
						<input :type="repwd_see ? 'text' : 'password'" placeholder="请输入确认密码" v-model="repwd" class="form-input"/>
						<view class="get-code" @tap="see(2)">
							<i class="icon" v-if="!repwd_see">&#xe614;</i>
							<i class="icon" v-else>&#xe617;</i>
						</view>
					</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="login-btn" @tap="submit()">
				<lg-btn>确认</lg-btn>
			</view>
		</view>
	</view>
</template>

<script>
	import lgBtn from '../../components/unit/button.vue';
	
	export default{
		data(){
			return {
				s:0,
				s_time : '',
				form:{
					mobile : '',
					code : '',
					password : '',
				},
				repwd : '',
				pwd_see : false,
				repwd_see : false
			}
		},
		components:{ lgBtn },
		methods:{
			// 验证手机号
			rules() {
				  if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile))){ 
					   this.toast('手机号格式不正确')
				    } 
			},
			//获取验证码
			getCode(){
				if(!this.form.mobile)return this.toast('请输入手机号码');
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile)))
				return   this.toast('手机号格式不正确');
				if(this.s == 0) {
					//请求后端获取验证码
					this.ajax('login/getCode',{
						data:{mobile : this.form.mobile},
						success:(res) => {
							this.toast(res.msg);
							if(res.code) {
								this.s = 60;
								this.s_time = setInterval(()=>{
									this.s--;
									if(this.s <= 0) {
										clearInterval(this.s_time);
										this.s = 0;
									}
								},1000);
							}
						}
					});
				}
			},
			//确定注册
			submit(){
				if(!this.form.mobile)return this.toast('请输入手机号');
				if(!this.form.code)return this.toast('请输入验证码');
				if(!this.form.password)return this.toast('请输入新密码');
				if(!this.repwd)return this.toast('请输入确认密码');
				if(this.form.password != this.repwd)return this.toast('两次输入的密码不一致');
				this.ajax('login/forget',{
					data:this.form,
					success:(res) => {
						this.toast(res.msg);
						if(res.code) {
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/login/login'
								})
							},1000)
						}
					}
				});
			},
			//查看密码
			see(e){
				if(e == 1) {
					this.pwd_see = this.pwd_see ? false : true;
				}else{
					this.repwd_see = this.repwd_see ? false : true;
				}
			},
		}
	}
</script>

<style>
	@import url("../../static/css/login/index.css");
</style>
